<script setup>

import {RouterView} from "vue-router"
import sideBar from "@/views/home/components/sideBar.vue"
import tags from "@/views/home/components/tags.vue"
import {computed, onMounted, ref} from "vue";
import {useUserInfoStore, useTokenStore,loginUrlStore} from "@/stores/index.js";
import {getInfo} from "@/api/web/user.js";
import router from "@/router/index.js";

const novaTokenStore = useTokenStore()

const loginUrl = computed(() => {
  return loginUrlStore().getLoginUrl()
})

const userInfo = computed(()=>{
  return useUserInfoStore().getUserInfo()
})

const novaToken = ref(null)

const logout = ()=>{
  novaTokenStore.removeToken()
  router.push("/"+loginUrlStore().getLoginUrl())
}
onMounted(()=>{
  getInfo().then(res => {
    useUserInfoStore().setUserInfo(res.data.data.userInfo)
  })
  novaToken.value = novaTokenStore.getToken()
})

</script>

<template>
  <div class="nova_body">
    <div id="nav-menu" class="avue-sidebar" style="width: 240px;height: 100%;background-color: #FFFFFF">
      <el-card class="nova_logo">
        安全管理中心
      </el-card>

        <sideBar></sideBar>

    </div>
    <div style="width: calc(100% - 240px);height: 100%;">
      <div class="nova_header">
           <div style="width: calc(100% - 10px);height: calc(100% - 50px);display: flex;justify-content: right;align-items: center;">
             <div style="height: 100%;width:calc(100% - 200px);display: flex;justify-content: right;align-items: center;"></div>
             <div style="height: 100%;width:50px;display: flex;justify-content: right;align-items: center;">
               <i class="iconfont icon-bell" style="font-size: 25px;color: #1D62D9;cursor: pointer;">
                 <span class="badge" >99+</span>
               </i>
             </div>
             <div style="height: 100%;width:150px;display: flex;justify-content: center;align-items: center;">
               <img class="top-bar__img"
                    :src="userInfo.avatar">
               <el-dropdown>
          <span class="el-dropdown-link">
            {{userInfo.name}}
          </span>
                 <template #dropdown>
                   <el-dropdown-menu>
                     <el-dropdown-item @click="logout"
                                       divided>登 出</el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
             </div>
           </div>
           <div style="width: calc(100% - 10px);height:50px;">
            <tags></tags>
           </div>
      </div>
      <RouterView></RouterView>
    </div>
  </div>

</template>

<style  scoped lang="scss">
.nova_body{
  width: 100%;
  height: 100vh;
  display: flex;
  min-width: 1280px;
  justify-content: center;
  align-items: center;
}
.nova_header{
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nova_main{
  width: 100%;
  height: calc(100% - 100px);
}
.nova_logo{
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #001529;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.badge {
  // position: absolute;
  margin-top: 0;
  line-height:12px;
  right: 20px;
  background-color: white;
  color: red;

  font-size: 12px;
}
.top-bar__img {
  margin: 0 5px;
  padding: 2px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  box-sizing: border-box;
  border: 1px solid #eee;
  vertical-align: middle;
}
</style>